<!--
 * @Date: 2023-06-28 08:24:21
 * @作者: 七星玉蘅
 * @邮箱: 1532250426@qq.com
 * @LastEditTime: 2023-06-28 20:29:41
 * @FilePath: \kaifamiao\client\src\views\phb.vue
-->
<template>
    <div>
        总共: {{ tableData.length }} 条数据
        <p>按分数由高到低排行</p>
        <!-- 展示数据的列表 -->
        <el-table :data="tableData" style="width: 80%;margin: 0 auto;" border>
            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column prop="points" label="分数" width="180" />
            <el-table-column prop="time" label="所用时间" width="180" />
            <el-table-column prop="numbers" label="消除方块数量" width="180" />
            <el-table-column :formatter="nd" prop="difficulty_factor" label="难度等级" width="180" />
            <el-table-column :formatter="gsh" prop="end_time" label="提交分数时间" />
        </el-table>
        <el-backtop :right="100" :bottom="100" />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import moment from 'moment'

let tableData = ref([]);
const getData = () => {
    fetch('/api/getlist').then(function (data) {
        data.json().then(function (result) {
            // console.log(result);
            tableData.value = result.records
            // console.log(tableData);
        })
        // console.log(data);
    })
}
// 格式化时间
function gsh(row, column, cellValue, index) {
    const datarc = row[column.property];
    return moment(cellValue).format('YYYY-MM-DD hh:mm:ss')

}

function nd(row, column, cellValue, index) {
    return cellValue === '1' ? '简单' : cellValue === '2' ? '一般' : '困难'
}

onMounted(() => {
    getData();
})



// export default {
//     data() {
//         return {
//             // tableData: []
//         }
//     },
//     setup() {
//         let tableData = ref([]);
//         const getData = () => {
//             fetch('/api/getlist').then(function (data) {
//                 data.json().then(function (result) {
//                     console.log(result);
//                     tableData.value = result.records
//                     console.log(tableData);
//                 })

//                 // console.log(data);
//             })
//         }
//         onMounted(() => {
//             getData();
//         })
//         return { tableData, getData };
//     },
//     methods: {
//         getData() {
//             const _that = this
//             fetch('/api/getlist').then(function (data) {
//                 data.json().then(function (result) {
//                     console.log(result);
//                     _that.tableData = result.records
//                     console.log(_that.tableData);
//                 })

//                 // console.log(data);
//             })
//         }
//     },
//     mounted() {
//         // this.getData()
//     }
// }



</script>

<style lang="sass" scoped>

</style>